<template>
  <div class="list">
    <Header title="全部商品" back> </Header>
    <!-- 排序 -->
    <div class="listranger">
      <ul>
        <li>最新</li>
        <li>销量</li>
        <li>人气</li>
        <li>价格</li>
        <li class="iconfont" @click="type = 'two'" v-if="type == 'one'">
          &#xe613;
        </li>
        <li class="iconfont" @click="type = 'one'" v-else>&#xe653;</li>
      </ul>
    </div>
    <!-- 商品列表 -->

    <div class="goodsList">
      <!-- 单行 -->
      <van-row
        type="flex"
        v-for="item in goodsList"
        :key="item.goods_id"
        v-show="type == 'one'"
      >
        <router-link :to="'/goodinfo/' + item.goods_id">
          <van-col span="8">
            <img src="@/assets/imgs/xiaomi.png" alt="" />
          </van-col>
          <van-col span="10">
            <p class="desc">{{ item.goods_name }}</p>
            <div class="icon">
              <span>￥{{ item.shop_price }}</span>
              <span class="iconfont">&#xe640;</span>
            </div>
          </van-col>
        </router-link>
      </van-row>
      <!-- 多行 -->
      <div class="db">
        <div
          v-show="type == 'two'"
          class="db_row"
          v-for="val in goodsList"
          :key="val.goods_id"
        >
          <router-link :to="'/goodinfo/' + val.goods_id">
            <img src="@/assets/imgs/xiaomi.png" alt="" />
            <div class="db_desc">
              <p class="db_txt">{{ val.goods_name }}</p>
              <div class="icon">
                <span>￥{{ val.shop_price }}</span>
                <span class="iconfont">&#xe640;</span>
              </div>
            </div>
          </router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Header from "@/components/Header";
export default {
  components: {
    Header
  },
  data() {
    return {
      id: "",
      goodsList: [],
      type: "one" //控制单双排、默认单排
    };
  },
  created() {
    this.getGoodsList();
  },
  methods: {
    async getGoodsList() {
      let { data: res } = await this.$axios.get("Goods/goodsList", {
        params: { id: this.$route.params.id }
      });
      if (res.status !== 1)
        return this.$notify({ type: "danger", message: res.msg });
      this.goodsList = res.result.goods_list;
    }
  }
};
</script>

<style lang="less">
.list {
  background-color: #f4f5fa;
  .ct {
    color: #333333;
    font-weight: 700;
    font-family: PingFang-SC-Bold;
  }

  .header .lt[data-v-61dd7a3d] {
    transform: translateY(50%);
    margin-left: 24px;
  }
  .listranger {
    height: 88px;
    border-top: 1px solid #999;
    background-color: #fff;
    line-height: 87px;
    ul {
      display: flex;
      justify-content: space-around;
      font-size: 28px;
      font-weight: 400;
      .iconfont {
        font-size: 36px;
      }
    }
  }
  .goodsList {
    margin-top: 40px;
    padding: 0 24px;
    .van-row {
      margin-bottom: 20px;
      background-color: #fff;
      img {
        width: 100%;
      }
      .van-col--10 {
        flex: 1;
        padding: 30px 44px 0;
        width: 65%;
        .desc {
          width: 412px;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          font-size: 30px;
          color: #000000;
        }
        .icon {
          display: flex;
          font-size: 36px;
          color: #ff4f02;
          margin-top: 39px;
          justify-content: space-between;
        }
      }
    }
    // 双排
    .db {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;

      .db_row {
        background-color: #fff;
        display: flex;
        flex-direction: column;
        width: 344px;
        justify-content: space-between;
        height: 510px;
        margin-bottom: 20px;
        img {
          width: 100%;
          height: 344px;
        }
        .db_desc {
          padding: 23px 23px 0;
          .db_txt {
            overflow: hidden;
            font-size: 24px;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            // word-break: break-all;
            font-size: 30px;
            color: #000000;
          }
          .icon {
            display: flex;
            font-size: 36px;
            color: #ff4f02;
            justify-content: space-between;
          }
        }
        .db_left {
          flex-direction: column;
          width: 344px;
          background-color: red;
        }
        .db_right {
          flex-direction: column;
          width: 344px;
          background-color: red;
        }
      }
    }
  }
}
</style>
